<template>
	<up-tabbar :value="activeIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" activeColor="#F76D11">
		<up-tabbar-item v-for="(item,index) in list" :key="index" :text="item.label"
			:icon="activeIndex == item.index?item.activeIcon:item.icon" @click="tabClick(item)">
		</up-tabbar-item>

	</up-tabbar>
</template>

<script lang="ts" setup>
	import { ref, reactive, getCurrentInstance } from "vue";
	import { defineProps, withDefaults } from 'vue';
	const { proxy } = getCurrentInstance()
	const activeIndex = ref(0)
	const propsA = withDefaults(defineProps<{ activeTab ?: any }>(), {
		activeTab: () => 0
	});
	activeIndex.value = propsA.activeTab
	console.log(activeIndex.value);
	const list = ref([
		{ index: 0, label: '首页', icon: '/static/images/tabbar/tabbar1.png', activeIcon: '/static/images/tabbar/tabbar_active1.png', url: '/pages/index/index' },
		{ index: 1, label: '积分商城', icon: '/static/images/tabbar/tabbar2.png', activeIcon: '/static/images/tabbar/tabbar_active2.png', url: '/pages/pointsShop/index' },
		{ index: 2, label: '订单', icon: '/static/images/tabbar/tabbar3.png', activeIcon: '/static/images/tabbar/tabbar_active3.png', url: '/pages/order/index' },
		{ index: 3, label: '我的', icon: '/static/images/tabbar/tabbar4.png', activeIcon: '/static/images/tabbar/tabbar_active4.png', url: '/pages/my/index' },
	])

	const tabClick = (e) => {
		activeIndex.value = e.index
		if (e.url) {
			uni.reLaunch({
				url: e.url
			})
		}
		console.log(activeIndex.value);
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-border-top,
	.up-border-top {
		border: 0;
	}
</style>